import React, { Component } from 'react';

import './index.scss';

class TableBodyCon extends Component {

  onStatusBtnClick (id, index) {
    //轮播图以id去查，一个课程可能有多张轮播
    this.props.onStatusClick (id, index);
  }

  onChangeStarTeacher (id, index) {
    this.props.onChangeStarTeacher(id, index);
  }

  render () {
    const { teacherData } = this.props;
    return (
      <tbody>
        {
          teacherData.map((item, index) => {
            return (
              <tr key={ index }>
                <td>{ item.id  }</td>
                <td>
                  <a href={item.href} 
                    target='_blank'
                    rel="noopener noreferrer">
                    <img
                    className="teacher-img" 
                    src={ `http://tximg.wujinhui.xyz/${item.teacherImgKey}` } 
                    alt= { item.teacherName} />
                  </a>
                </td>
                <td className="course-name ellipsis">
                  <a href={ item.href } 
                    target="_blank" 
                    rel="noopener noreferrer">
                    { item.teacherName }
                  </a>
                </td>
                <td>
                  { item.courseCount }
                </td>
                <td>
                  { item.studentCount }
                </td>
                <td> { item.intro } </td>
                <td>
                  <button 
                    className={ ['btn', item.isStar ? ' btn-danger': ' btn-success'].join('') }
                    onClick ={ this.onChangeStarTeacher.bind(this, item.id, index)}>
                    { item.isStar ? '下线明星': '上线明星'}
                  </button>
                </td>
                <td>
                  <button 
                    className={ ['btn', item.status ? ' btn-danger': ' btn-success'].join('') }
                    onClick ={ this.onStatusBtnClick.bind(this, item.id, index)}>
                    { item.status ? '下线': '上线'}
                  </button>
                </td>
               
              </tr>
            )
          })
        }
      </tbody>
    )
  }
}

export default TableBodyCon;